---
title: Understanding Plugins
description: Learn how plugins add features like zooming, searching, and annotations to your headless PDF viewer in Svelte.
---

# Understanding Plugins

Plugins are the heart of EmbedPDF's headless architecture. They are modular packages that add specific features and capabilities to your core viewer. This à la carte approach ensures your application remains lean, loading only the functionality you actually need.

Think of the `<EmbedPDF>` component as a smartphone: it's powerful on its own, but it's the apps (plugins) you install that give it new features like navigation, social media, or games.

## Example: Adding a Zoom Feature

Let's walk through a complete example of adding a zoom feature to a basic viewer.

### 1. Install the Plugin Package

First, install the zoom plugin package:

```sh npm2yarn
npm install @embedpdf/plugin-zoom
````

### 2\. Register the Plugin

Next, import `ZoomPluginPackage` and add it to the `plugins` array that you pass to the `<EmbedPDF>` component. This activates the zoom functionality.

```svelte {4,14}
<script lang="ts">
// ... other imports
import { createPluginRegistration } from '@embedpdf/core';
import { ZoomPluginPackage } from '@embedpdf/plugin-zoom/svelte';

const plugins = [
  // ... other essential plugins
  createPluginRegistration(LoaderPluginPackage, { /* ... */ }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
  createPluginRegistration(RenderPluginPackage),

  // Add the zoom plugin to the array
  createPluginRegistration(ZoomPluginPackage),
];
</script>
```

### 3\. Create a UI Component with the Plugin's Store

With the plugin registered, you can create a new component that uses the `useZoom` store to access reactive state and functions.

```svelte copy filename="ZoomToolbar.svelte"
<script lang="ts">
import { useZoom } from '@embedpdf/plugin-zoom/svelte';

// The function returns a readable Svelte store
const zoom = useZoom();
</script>

{#if zoom.provides}
  <div style="padding: 8px; background: #eee; display: flex; gap: 8px; align-items: center;">
    <span>Zoom: {Math.round(zoom.state.currentZoomLevel * 100)}%</span>
    <button onclick={() => zoom.provides.zoomOut()}>-</button>
    <button onclick={() => zoom.provides.zoomIn()}>+</button>
    <button onclick={() => zoom.provides.requestZoom(1.0)}>Reset</button>
  </div>
{/if}
```

### 4\. Add the Component to Your Viewer

Finally, import and place your new `<ZoomToolbar />` component **inside** the `<EmbedPDF>` provider. This is essential, as it allows the `useZoom` store to access the context provided by the `ZoomPluginPackage`.

```svelte filename="PDFViewer.svelte" {3, 10}
<script lang="ts">
import { EmbedPDF } from '@embedpdf/core/svelte';
import ZoomToolbar from './ZoomToolbar.svelte'; // 1. Import the toolbar
// ... other setup
</script>

<div style="height: 500px; border: 1px solid black; display: flex; flex-direction: column;">
  <EmbedPDF engine={pdfEngine.engine} {plugins}>
    <ZoomToolbar />     
    <div style="flex: 1; overflow: hidden; position: relative;">
      <Viewport>
        {/* ... Scroller and RenderLayer ... */}
      </Viewport>
    </div>
  </EmbedPDF>
</div>
```